<script>
</script>

<template>
    <div class="cm-statistic-device">
        <svg
            width="100%"
            height="100%"
            viewBox="0 0 100 100"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
        >
            <circle
                id="inactive"
                :r="42"
                :cx="50"
                :cy="50"
                fill="transparent"
                :stroke-width="8"
                :stroke-dasharray="0"
                :stroke-dashoffset="0"
                stroke="red"
            />
        </svg>
        <svg
            class="cm-statistic-svg"
            width="100%"
            height="100%"
            viewBox="0 0 100 100"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
        >
            <circle
                id="ready"
                :r="42"
                :cx="50"
                :cy="50"
                fill="transparent"
                :stroke-width="8"
                :stroke-dasharray="42 * 2 * Math.PI"
                :stroke-dashoffset="100"
                stroke="blue"
            />
        </svg>
    </div>
</template>

<style scoped>
.cm-statistic-device {
  position: relative;
  width: 200px;
  height: 200px;
}

.cm-statistic-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

</style>

